<template>
  <Menu :active-name="setActive" theme="dark" width="auto" @on-select="routeTo" accordion>
    <div class="logo">
      <Logo></Logo>
      <h1 v-if="!shrink">学创校园</h1>
    </div>
    <div v-if="!shrink" style="margin:16px 0">
      <!-- 发布管理 -->
      <MenuItem name="releasemg1">
        <Icon type="monitor"  :size="16"></Icon>
        {{ $t('menu.releaseMg.title')  }}
      </MenuItem>
      <!-- 三方服务 -->
      <Submenu name="service">
        <template slot="title">
          <Icon type="network" :size="16"></Icon>
          <span class="layout-text">{{ $t('menu.service.title') }}</span>
        </template>
        <MenuItem name="booksrepurchase">{{ $t('menu.service.submenu.booksRepurchase') }}</MenuItem>
        <!-- <MenuItem name="dresseslease">{{ $t('menu.service.submenu.dressesLease') }}</MenuItem> -->
      </Submenu>
      <!-- 用户管理 -->
      <MenuItem name="usermg1">
        <Icon type="person-stalker" :size="16"></Icon>
        {{ $t('menu.userMg.title')  }}
      </MenuItem>
      <!-- 用户分析 -->
      <Submenu name="userAnalyze">
        <template slot="title">
          <Icon type="ios-pulse-strong" :size="16"></Icon>
          <span class="layout-text">{{ $t('menu.userAnalyze.title') }}</span>
        </template>
        <MenuItem name="userGroup">{{ $t('menu.userAnalyze.submenu.userGroup') }}</MenuItem>
        <MenuItem name="propAnalyze">{{ $t('menu.userAnalyze.submenu.propAnalyze') }}</MenuItem>
      </Submenu>
       <!-- 个人主页 -->
      <Submenu name="personalHost">
        <template slot="title">
          <Icon type="ios-contact" :size="16"></Icon>
          <span class="layout-text">{{ $t('menu.personalHost.title') }}</span>
        </template>
        <MenuItem name="personalCenter">{{ $t('menu.personalHost.submenu.personalCenter') }}</MenuItem>
        <MenuItem name="personalSetting">{{ $t('menu.personalHost.submenu.personalSetting') }}</MenuItem>
      </Submenu>
       <!-- 商家管理 -->
      <Submenu name="businessMg">
        <template slot="title">
          <Icon type="earth" :size="16"></Icon>
          <span class="layout-text">{{ $t('menu.businessMg.title') }}</span>
        </template>
        <MenuItem name="SuitCustom">{{ $t('menu.businessMg.submenu.SuitCustom') }}</MenuItem>
        <MenuItem name="stationmaster">{{ $t('menu.businessMg.submenu.stationmaster') }}</MenuItem>
        <MenuItem name="jdKeepsake">{{ $t('menu.businessMg.submenu.jdKeepsake') }}</MenuItem>
        <MenuItem name="jkdSpecialty">{{ $t('menu.businessMg.submenu.jkdSpecialty') }}</MenuItem>
        <MenuItem name="GraduationPhotos">{{ $t('menu.businessMg.submenu.GraduationPhotos') }}</MenuItem>
      </Submenu>
      <!-- 配置管理 -->
      <!-- <MenuItem name="configmg1">
         <Icon type="settings" :size="16"></Icon>
        {{ $t('menu.configMg.title')  }}
      </MenuItem> -->
      <!-- 权限管理 -->
      <MenuItem name="authoritymg1">
         <Icon type="gear-b" :size="17"></Icon>
        {{ $t('menu.authorityMg.title')  }}
      </MenuItem>
       <!-- 千米网后台/云商城 -->
       <MenuItem name="qmwbmg1">
         <Icon type="ios-cloud" :size="17"></Icon>
        {{ $t('menu.qmwBMg.title')  }}
      </MenuItem>
      <!-- <li  class="ivu-menu-item" @click="toQMW">
        <i class="ivu-icon ivu-icon-ios-cloud" style="font-size: 17px;"></i>
        云商城
      </li> -->
      <!-- 公众号管理 -->
      <Submenu name="weChatSubscriptionMg">
        <template slot="title">
          <Icon type="ios-color-filter" :size="16"></Icon>
          <span class="layout-text">{{ $t('menu.weChatSubscriptionMg.title') }}</span>
        </template>
        <MenuItem name="userFeedBack">{{ $t('menu.weChatSubscriptionMg.submenu.userFeedBack') }}</MenuItem>
        <MenuItem name="campusOperation">{{ $t('menu.weChatSubscriptionMg.submenu.campusOperation') }}</MenuItem>
        <MenuItem name="recruit">{{ $t('menu.weChatSubscriptionMg.submenu.recruit') }}</MenuItem>
      </Submenu>
      <!-- 布局 -->
      <!-- <Submenu name="layout">
        <template slot="title">
          <Icon type="clipboard" :size="16"></Icon>
          <span class="layout-text">{{ $t('menu.layout.title') }}</span>
        </template>
        <MenuItem name="headercontentfooter">{{ $t('menu.layout.submenu.headercontentfooter') }}</MenuItem>
        <MenuItem name="headercontentsider">{{ $t('menu.layout.submenu.headercontentsider') }}</MenuItem>
        <MenuItem name="headersidercontent">{{ $t('menu.layout.submenu.headersidercontent') }}</MenuItem>
        <MenuItem name="siderheadercontent">{{ $t('menu.layout.submenu.siderheadercontent') }}</MenuItem>
        <MenuItem name="siderheadercontentretract">{{ $t('menu.layout.submenu.siderheadercontentretract') }}</MenuItem>
      </Submenu> -->
      <!-- </MenuItem> -->
    </div>
    <!-- 菜单隐藏时 -->
    <div v-else style="text-align:center;margin:16px 0">
      <!-- releaseMg发布管理 -->
      <Dropdown placement="right-start" style="padding:4px 0" transfer @on-click="routeTo">
        <Button type="text" style="width:90px;margin-left:-5px;">
          <Icon type="monitor" :size="20"></Icon>
        </Button>
        <DropdownMenu slot="list">
          <DropdownItem name="releasemg1">发布管理</DropdownItem>
        </DropdownMenu>  
      </Dropdown>
      <!-- service三方服务 -->
      <Dropdown placement="right-start" style="padding:4px 0" transfer @on-click="routeTo">
        <Button type="text" style="width:90px;margin-left:-5px;">
          <Icon type="network" :size="20"></Icon>
        </Button>
        <DropdownMenu slot="list">
          <DropdownItem name="booksrepurchase">{{ $t('menu.service.submenu.booksRepurchase') }}</DropdownItem>
          <!-- <DropdownItem name="dresseslease">{{ $t('menu.service.submenu.dressesLease') }}</DropdownItem> -->
        </DropdownMenu>
      </Dropdown>
      <!-- userMg用户管理 -->
        <Dropdown placement="right-start" style="padding:4px 0" transfer @on-click="routeTo">
        <Button type="text" style="width:90px;margin-left:-5px;">
          <Icon type="person-stalker" :size="20"></Icon>
        </Button>
        <DropdownMenu slot="list">
          <DropdownItem name="usermg1">用户管理</DropdownItem>
        </DropdownMenu>  
      </Dropdown>
       <!-- 用户分析 -->
      <Dropdown placement="right-start" style="padding:4px 0" transfer @on-click="routeTo">
        <Button type="text" style="width:90px;margin-left:-5px;">
          <Icon type="ios-pulse-strong" :size="20"></Icon>
        </Button>
        <DropdownMenu slot="list">
          <DropdownItem name="userGroup">{{ $t('menu.userAnalyze.submenu.userGroup') }}</DropdownItem>
          <DropdownItem name="propAnalyze">{{ $t('menu.userAnalyze.submenu.propAnalyze')}}</DropdownItem>
        </DropdownMenu>
      </Dropdown>
       <!-- 个人主页 -->
      <Dropdown placement="right-start" style="padding:4px 0" transfer @on-click="routeTo">
        <Button type="text" style="width:90px;margin-left:-5px;">
          <Icon type="ios-contact" :size="20"></Icon>
        </Button>
        <DropdownMenu slot="list">
          <DropdownItem name="personalCenter">{{ $t('menu.personalHost.submenu.personalCenter') }}</DropdownItem>
          <DropdownItem name="personalSetting">{{ $t('menu.personalHost.submenu.personalSetting') }}</DropdownItem>
        </DropdownMenu>
      </Dropdown>
       <!-- 商家管理 -->
      <Dropdown placement="right-start" style="padding:4px 0" transfer @on-click="routeTo">
        <Button type="text" style="width:90px;margin-left:-5px;">
          <Icon type="earth" :size="20"></Icon>
        </Button>
        <DropdownMenu slot="list">
          <DropdownItem name="SuitCustom">{{ $t('menu.businessMg.submenu.SuitCustom') }}</DropdownItem>
          <DropdownItem name="stationmaster">{{ $t('menu.businessMg.submenu.stationmaster') }}</DropdownItem>
          <DropdownItem name="jdKeepsake">{{ $t('menu.businessMg.submenu.jdKeepsake') }}</DropdownItem>
          <DropdownItem name="jkdSpecialty">{{ $t('menu.businessMg.submenu.jkdSpecialty') }}</DropdownItem>
          <DropdownItem name="GraduationPhotos">{{ $t('menu.businessMg.submenu.GraduationPhotos') }}</DropdownItem>
        </DropdownMenu>
      </Dropdown>
      <!-- configMg配置管理 -->
       <!-- <Dropdown placement="right-start" style="padding:4px 0" transfer @on-click="routeTo">
        <Button type="text" style="width:90px;margin-left:-5px;">
          <Icon type="settings" :size="20"></Icon>
        </Button>
        <DropdownMenu slot="list">
          <DropdownItem name="configmg1">配置管理</DropdownItem>
        </DropdownMenu> 
      </Dropdown> -->
      <!-- authority权限管理 -->
       <Dropdown placement="right-start" style="padding:4px 0" transfer @on-click="routeTo">
        <Button type="text" style="width:90px;margin-left:-5px;">
          <Icon type="gear-b" :size="20"></Icon>
        </Button>
        <DropdownMenu slot="list">
          <DropdownItem name="authoritymg1">权限管理</DropdownItem>
        </DropdownMenu> 
      </Dropdown>
       <!-- 千米网后台/云商城 -->
      <Dropdown placement="right-start" style="padding:4px 0" transfer @on-click="routeTo">
        <Button type="text" style="width:90px;margin-left:-5px;">
          <Icon type="ios-cloud" :size="20"></Icon>
        </Button>
        <DropdownMenu slot="list">
          <DropdownItem name="qmwbmg1">云商城</DropdownItem>
        </DropdownMenu> 
      </Dropdown>
      <!-- 公众号管理 -->
      <Dropdown placement="right-start" style="padding:4px 0" transfer @on-click="routeTo">
        <Button type="text" style="width:90px;margin-left:-5px;">
          <Icon type="ios-color-filter" :size="20"></Icon>
        </Button>
        <DropdownMenu slot="list">
          <DropdownItem name="userFeedBack">{{ $t('menu.weChatSubscriptionMg.submenu.userFeedBack') }}</DropdownItem>
          <DropdownItem name="campusOperation">{{ $t('menu.weChatSubscriptionMg.submenu.campusOperation') }}</DropdownItem>
          <DropdownItem name="recruit">{{ $t('menu.weChatSubscriptionMg.submenu.recruit') }}</DropdownItem>
        </DropdownMenu>
      </Dropdown>
      <Tooltip placement="right">
        <Button type="text" style="width:90px;margin-left:-5px;">
          <Icon type="ios-bookmarks" :size="20"></Icon>
        </Button>
        <template slot="content">文档</template>
      </Tooltip>
    </div>
  </Menu>
</template>
<script>
import { Logo } from '@/components'
export default {
  components: {Logo},
  name: 'SideNav',
  props: {
    shrink: {
      type: Boolean,
      default: false
    }
  },
  data(){
    return {
      activeName:'releasemg1'
    }
  },
  computed: {
    setActive() {
      this.activeName=this.$route.path.split('/')[2]
      return this.activeName
    },
  },
  methods: {
    routeTo(e) {
      this.$router.push({ name: e })
    },
    // toQMW(){
    //   window.open("https://app.1000.com/#/cash/cloud-shop-home","_blank")
    // }
  }
}
</script>
<style scoped lang="less">
.sider {
  min-height: 100vh;
  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
  position: relative;
  z-index: 10;
}

.logo {
  background-color: #002140;
  height: 50px;
  line-height: 50px;
  width: 220px;
  padding-left: 24px;
  overflow: hidden;
  display: flex;
  align-items: center;
  img{
    display: inline-block;
    vertical-align: middle;
    height: 32px;
  }
  h1 {
    color: #fff;
    display: inline-block;
    vertical-align: middle;
    font-size: 20px;
    font-family: 'Myriad Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif;
    font-weight: 600;
  }
}
svg {
  margin-right: 8px;
}
</style>
